<template>
    <div class="city">
        <my-head :title="$route.query.name?('当前城市 - '+$route.query.name) :'城市选择'" ></my-head>
         <van-search
            v-model="keyword"
            show-action
            placeholder="输入城市名或拼音"
            @search="onSearch"
            @cancel="onCancel"
        />
        <div class="city-box" v-if="toggle">
            <div class="hot">
                <p class="name">热门城市</p>
                <div class="hot-list ">
                    <div class="hot-item" @click="chooseCity(l)" v-for="(l,i) in hotCity" :key='i'>
                        {{l.name}}
                    </div>
                </div>
            </div>
            <van-index-bar 
                :index-list="pylist" 
                sticky 
                z-index="10000" 
                :sticky-offset-top="46">
                <div v-for="(l,i) in pylist" :key='i'>
                    <van-index-anchor :index="l" />
                    <!-- cityList 过滤 选出 字母A B C  -->
                    <van-cell @click="chooseCity(item)" :title="item.name" v-for="(item,index) in cityList.filter(val=>val.pinyin.indexOf(l.toLowerCase())==0)" :key='index'/>
                </div>
            </van-index-bar>
        </div>
        <div class="search-box" v-else>
            <div v-if="slist.length>0">
                <van-cell v-for="(l,i) in slist" :key="i" :title="l.name" @click="chooseCity(l)"/>
            </div>
            <div v-else class="nodata">
                <van-empty description="没有找到匹配的城市" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            keyword:'',
            slist:[], // 搜索到城市列表数据 
            toggle:true ,
            pylist:[
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                // "U",
                // "V",
                "W",
                "X",
                "Y",
                "Z",
            ]
        }
    },
    // 路由守卫 没有选择城市不让你离开 必须选择城市
    beforeRouteLeave(to,from,next){
        if(this.city){
            next()
        }else{
            next(false)  // 不能离开 
            this.$toast("请去定位选择你的所在城市")
        }
    },
    methods:{
        onSearch(value){
            console.log("onSearch- 123")
            console.log(value)
            // 过滤  
            this.toggle = false;  // 显示搜索的内容 
            this.slist = this.cityList.filter(item=>(item.name.indexOf(value)>-1 || item.pinyin.indexOf(value)>-1)  )
        },
        onCancel(){
            console.log("onCancel- 999")
            this.toggle = true;
            this.slist = [] 
            this.keyword = ''
        },
        chooseCity(city){
            console.log(city)
            this.changeCity(city);  // 存储全局的当前城市信息 
            this.$router.back()
        }
    },
    mounted(){
        this.getCityListAsync()
    }
}
</script>

<style lang="scss" scoped>
.city{
    ::v-deep .van-index-anchor{
        background-color: #f4f4f4;
        // color: #797d82;
    }
    .hot{
        width:100%;
        padding:15px;
        .name{
            font-size: 13px;
            color: #797d82;
            margin-bottom: 10px;
        }
        .hot-list{
            display: flex;
            flex-wrap: wrap;
            .hot-item{
                width: calc(33.33333vw - 11px);
                text-align: center;
                padding-bottom: 15px;
                margin:0 15px 15px;
                height: 30px;
                background-color: #f4f4f4;
                line-height: 30px;
                border-radius: 3px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                // margin: 0 7.5px;
                font-size: 14px;
                color: #191a1b;
            }
        }
    }
}
</style>